<template>
	<wsPage title="退款/货单">
		<div slot="page_operate">
			<Button  @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<Row class="tab-demo">
			<Col span="24">
				<Button :type="activeIndex == 0 ? 'primary' : ''" @click="queryByStatys()">全部</Button>
				<Button :type="activeIndex == 2 ? 'primary' : ''" @click="queryByStatys(2)">待处理</Button>
				<Button :type="activeIndex == 4 ? 'primary' : ''" @click="queryByStatys(4)">已处理</Button>
				<Button :type="activeIndex == 5 ? 'primary' : ''" @click="queryByStatys(5)">已拒绝</Button>
			</Col>
		</Row>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="退款类型">
							<Select clearable v-model="queryForm.refundType" placeholder="请选择" class="ws-form-select">
									<Option value="1">退款</Option>
									<Option value="2">退货</Option>
							</Select>
					</FormItem>
					<FormItem label="退款单号">
							<Input v-model="queryForm.sn" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="订单编号">
							<Input v-model="queryForm.orderSn" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="运单号">
							<Input v-model="queryForm.trackingNo" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="申请时间">
						<Row>
			                <Col span="11">
			                    <FormItem>
			                        <DatePicker type="date" placeholder="查询开始时间" v-model="queryForm.searchStartTime" @on-change="dateConfirm"></DatePicker>
			                    </FormItem>
			                </Col>
			                <Col span="2" style="text-align: center">-</Col>
			                <Col span="11">
			                    <FormItem>
			                        <DatePicker type="date" placeholder="查询结束时间" v-model="queryForm.searchEndTime" @on-change="dateConfirm"></DatePicker>
			                    </FormItem>
			                </Col>
			            </Row>      
			        </FormItem>
				</Form>
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data"></Table>
			</div>
		</wsSmPanel>

		<!--审核弹框-->
		<wsModal v-model="auditModal.show" ok-text="审核" title="退款单审核" @on-ok="auditModalOk" @on-cancel="auditModalCancel">
		    <Form ref="auditForm" :model="auditModal.form" :rules="auditModal.validate" :label-width="100">
		        <FormItem label="审核状态" prop="auditStatus">
		            <Select clearable v-model="auditModal.form.auditStatus" placeholder="请选择">
		                <Option value=1>通过</Option>
		                <Option value=2>驳回</Option>
		            </Select>
		        </FormItem>
				<FormItem label="审核意见" prop="auditContent">
		            <Input type="textarea" v-model="auditModal.form.auditContent"></Input>
		        </FormItem>
		    </Form>
		</wsModal>
	</wsPage>
</template>

<script>
import Common from '../../../common/common.js';
	export default {
		data() {
			return {
				queryForm: {
					refundStatus: '',
					refundType: '',
					searchStartTime: '',
					searchEndTime: '',
					sn: '',
					orderSn: '',
					trackingNo: ''
				},
				table: {
					columns: [{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
					{
						title: '用户账号',
						key: 'loginName',
	          align: 'center'
					},
					{
						title: '退款单号',
						key: 'sn',
	          align: 'center'
					},
					{
						title: '订单编号',
						key: 'orderSn',
	          align: 'center'
					},
					{
						title: '运单号',
						key: 'trackingNo',
	          align: 'center'
					},
					{
						title: '支付金额',
						key: 'payAmount',
	          align: 'center'
					},
					{
						title: '退款金额',
						key: 'amount',
	          align: 'center'
					},
					{
						title: '退款类型',
						key: 'refundType',
	          align: 'center',
						render: (h, params) => {
							return h('span',{

							},params.row.refundType == 1?"退款":"退货")
						}
					},
					{
						title: '审核状态',
						key: 'status',
	          align: 'center',
						render: (h, params) => {
							return h('Tag',{
								props: {
                        			type: 'border',
                        			color: params.row.status === 2 ? 'blue' : params.row.status === 4? 'green':'red'
                        		}
							},this.checkStatus(params.row.status))
						}
					},
					{
						title: '创建日期',
						key: 'createDate',
	          align: 'center'
					},
					{
						title: '操作',
						width: 150,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {

							let childs_ = [];
							if(params.row.status === 2&&params.row.amount!="0.00") {
								let c2 = h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										this.auditModal.form.orderRefundId = params.row.id;
										this.auditModal.form.auditStatus = '1';
										this.auditModal.show = true;
									}
								}
							}, "审核");
								childs_.push(c2);
							}
							let c1 = h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										this.jumpDetail(params.row.id);
									}
								}
							}, '详情');
							childs_.push(c1);
							return h('div', childs_)
						}
					}],

					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				},
				activeIndex: 0,
				//审核弹框
				auditModal: {
					show: false,
					form: {
						orderRefundId: '',
						auditStatus: '',
						auditContent: ''
					},
					validate: {
						auditStatus: [
	                        { required: true, message: '请选择审核状态', trigger: 'blur' }
	                    ],
					}
				},
				clickSave: false,
				type: ''
			}
		},
		computed: {

		},
		mounted() {
			this.init();
		},
		methods: {
			/**
			 * 判断审核状态
			 */
			checkStatus(status){
				if(status == 1) return '退款中';
				if(status == 2) return '商家审核通过';
				if(status == 3) return '商家审核失败';
				if(status == 4) return '平台审核通过';
				if(status == 5) return '平台审核失败';
			},

			//查询开始时间段必填
			dateConfirm(){
				let searchStartTime = this.queryForm.searchStartTime;
				let searchEndTime = this.queryForm.searchEndTime;
				if (searchStartTime != null ||searchStartTime != '') {
					searchEndTime = new Date();
				} else if (searchEndTime != null || searchEndTime !='') {
					searchStartTime = searchEndTime;
				}
			},

			init() {
				this.clickSave = false;
				this.query();
			},
			//刷新
			refresh(){
				this.queryForm.refundStatus = '';
				this.queryForm.refundType = '';
				this.queryForm.searchStartTime = '';
				this.queryForm.searchEndTime = '';
				this.queryForm.sn = '';
				this.queryForm.orderSn = '';
				this.queryForm.nickname = '';
				this.table.page.pageNum = 1;
				this.init();
			},
			queryByStatys(type){
				this.queryForm.refundStatus = type;
				this.activeIndex = type;
				if(type == undefined){
					this.activeIndex = 0;
					this.table.page.pageNum = 1;
				}
				if(!isNaN(type)){
				 	this.table.page.pageNum = 1;
				}
				this.query();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/ops/orderRefunds?pageNum=' + pageNum + '&pageSize=' + pageSize, this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 审核的弹框取消操作
			 */
			auditModalCancel() {
				this.$refs['auditForm'].resetFields();
				this.auditModal.show = false;
				this.clickSave = false;
			},
			/**
			 * 审核的弹框确认操作
			 */
			auditModalOk() {
				this.$refs['auditForm'].validate((valid) => {
					if (valid) {
						this.audit();
			        } else {
			            this.$Message.error('请完善信息!');
			        }
			    });
			},

			audit(){
				if(this.clickSave){
					this.$Message.warning('请不要重复点击');
					return;
				}
				this.clickSave = true;
				const _this = this;
				this.axios.put('/ws/ops/refundrecord', _this.auditModal.form).then(response => {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('审核成功');
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('审核失败:' + message_);
					}
					_this.$refs['auditForm'].resetFields();
					_this.auditModal.show = false;
					_this.init();
				});
			},
			/**
			 * 查看详情
			 */
			jumpDetail(id){
				// this.$router.push('/orderDetail?id='+id);
				// this.$router.push({name:'/orderDetail?id='+id});
				this.$router.push({name:'ops_refundDetail_detail',query:{id:id}});
			}


		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>
